// 导入vue这个包, 得到Vue的构造函数
import Vue from 'vue'
// 导入App.vue根组件, 将来要把App.vue中的模板结构, 渲染到HTML页面中
import Layout from '@/Layout'
import store from './store/index.js'
import Test from './Test.vue'
import router from './router'
// BetterScroll的 slide插件
// import BScroll from '@better-scroll/core'
// import Slide from '@better-scroll/slide'
//
// BScroll.use(Slide)
// new BScroll('.bs-wrapper', {
//   scrollX: true,    // 表示HOR横向滚动, Tips: scrollX与scrollY是互斥关系
//   scrollY: false,   // 表示VER纵向滚动
//   slide: {
//     threshold: 100
//   },
//   momentum: false,
//   bounce: false,
//   stopPropagation: true
// })

// 导入全局样式
import './assets/css/global.css'
import directive from '@/components/base/directive'
/**
 * 在Vue项目的main.js入口文件中, 通过Vue.component()方法, 可以注册全局组件
 * 导入需要的全局注册的组件
 * #
 * 为什么注册组件的时候, 尽量要大写
 */
import Count from '@/components/Count'

// 参数1: 字符串格式, 表示组件的"注册名称"
// 参数2: 需要被全局注册的那个组件
Vue.component('MyCount', Count)

// 为什么定义全局组件没有成功!!!
// Vue.component('PulseLoader', require('vue-spinner/src/PulseLoader.vue'))

/**
 * productionTip  --> 翻译过来 生成环境提示
 * 2.2.0新增
 * 类型: boolean
 * 默认值: true
 * 用法: 设置为 false 以阻止 vue 启动时出现 prop环境提示
 * true值 出现下面的英文
 * You are running Vue in development mode.
 * Make sure to turn on production mode when deploying for production.
 * See more tips at https://vuejs.org/guide/deployment.html
 */
Vue.config.productionTip = false

// 全局自定义指令  bind方法和update方法逻辑相同, 可以简写成对象形式
// 参数1: 字符串, 表示全局自定义指令的名字
// 参数2: 对象, 用来接收执行指令的参数值      注意: 函数也是对象!!!
Vue.directive('g_color', (el, binding) => {
    el.style.color = binding.value
  }
)
// 全局自定义指令  bind方法和update方法, 分开写形式
Vue.directive('g_color02', {
    bind (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
)

// v-loading 加载指令
Vue.directive('loading', directive)

// 创建Vue的实例对象
// new Vue({
//   // 把 render 函数指定的组件, 渲染到HTML页面上
//   router,
//   render: h => h(App)
// }).$mount('#app')

// Vue 实例的$mount()方法, 作用和el属性完全是一样的
new Vue({
  // el: '#app',
  router,
  store,
  // 把 render 函数指定的组件, 渲染到HTML页面上
  // render 函数中, 渲染的那个 .vue组件, 那么这个组件就叫做 '根组件'
  render: h => h(Layout)
}).$mount('#app')
